<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reSize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/personCenter.css">
</head>
<body>
<div class="top-bar">
    <div class="w clearfloat">
        <ul class="top_left clearfloat">
            <li>
                <img src="img/phone1.png" alt="">
                0500-6000000
            </li>
            <li>
                <img src="img/time.png" alt="">
                上午9点至下午6点
            </li>
        </ul>
        <ul class="top_right">
            <li>
                <a href="">
                    <img src="img/addpeople_fill.png" alt="">
                    登录
                </a>
            </li>
            <li>
                <a href="">
                    <img src="img/register.png" alt="">
                    注册
                </a>
            </li>
            <li>
                <a href="">
                    购物车
                </a>
            </li>
        </ul>
    </div>
    <div class=""></div>
</div>
<div class="header">
    <div class="w clearfloat">
        <a href="" class="logo">
            <img src="img/logo.png" alt="">
        </a>
        <ul class="menu clearfloat">
            <li>
                <a href="" class="checked title" style="color: #fff;background-color: #ff6f00;">
                    首页
                </a>
            </li>
            <li>
                <a href="" class="title">
                    卧室
                </a>
            </li>
            <li>
                <a href="" class="title">
                    餐厅
                </a>
            </li>
            <li>
                <a href="" class="title">
                    厨房
                </a>
            </li>
            <li>
                <a href="" class="title">关于我们</a>
                <ul class="subMenu clearfloat" style="display: none">
                    <li>
                        <a href="">支付方式</a>
                    </li>
                    <li>
                        <a href="">
                            加盟方式
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="personCenter">
    <div class="container clearfloat">
        <ul class="perCenter-nav" id="perCenter-nav">
            <li>
                <a href="#" class="checked-nav">
                    <span class="nav-icon"></span>
                    我的订单
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="nav-icon"></span>
                    个人资料
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="nav-icon"></span>
                    重置密码
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="nav-icon"></span>
                    我的收获地址
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="nav-icon"></span>
                    我的推荐
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="nav-icon"></span>
                    修改手机号码
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="nav-icon"></span>
                    安全退出
                </a>
            </li>
        </ul>
        <div class="perCenter-content">
            <div class="page orders" style="display: block">
                <div class="page-container">
                    <h3>
                        订单列表
                    </h3>
                    <table class="shop_table">
                        <thead>
                           <tr>
                               <th class="order-number"><span>订单号</span></th>
                               <th class="order-date"><span>日期</span></th>
                               <th class="order-total"><span>状态</span></th>
                               <th class="amount"><span>合计</span></th>
                               <th class="order-actions"></th>
                           </tr>
                        </thead>
                        <script id="orderScript" type="text/html">
                            {{if data.list.length==0}}
                            <tr>
                                <td colspan="5">暂无订单数据</td>
                            </tr>
                            {{/if}}
                            {{each data.list item index}}
                            <tr>
                                <td class="order-number"><a href="#">{{item.orderCode}}</a></td>
                                <td class="order-date">{{item.createTime}}</td>
                                <td class="order-total">{{item.optionResult}}</td>
                                <td class="amount">¥ {{item.orderAmount}}</td>
                                <td class="order-actions">
                                    <a href="#" class="button">付款</a>
                                    <a href="#" class="button">取消</a>
                                    <a href="#" class="button">查看</a>
                                </td>

                            </tr>
                            {{/each}}
                        </script>
                        <tbody id="order">

                          <!--<tr>
                              <td class="order-number"><a href="#">#14945</a></td>
                              <td class="order-date">2017-10-19</td>
                              <td class="order-total">等待中</td>
                              <td class="amount">¥ 3,580.00</td>
                              <td class="order-actions">
                                  <a href="#" class="button">付款</a>
                                  <a href="#" class="button">取消</a>
                                  <a href="#" class="button">查看</a>
                              </td>

                          </tr>
                          <tr>
                              <td class="order-number"><a href="#">#14945</a></td>
                              <td class="order-date">2017-10-19</td>
                              <td class="order-total">等待中</td>
                              <td class="amount">¥ 3,580.00</td>
                              <td class="order-actions">
                                  <a href="#" class="button">查看</a>
                              </td>

                          </tr>-->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="page information" style="display: none">
                <h3 class="big-title">我的个人资料</h3>
                <div class="page-container">
                    <h3 class="infor-title">个人资料</h3>
                    <script id="persionScript" type="text/html">
                        <li class="infor-label">姓名</li>
                        <li class="infor-answer">{{data.name}}</li>
                        <div class="clear-both"></div>
                        <li class="infor-label">头像</li>
                        <li class="infor-answer">
                            <img src="{{data.headImg}}" class="img" alt="">
                        </li>
                        <div class="clear-both"></div>
                        <li class="infor-label">会员等级</li>
                        <li class="infor-answer">{{data.userClass | userClass}}</li>
                        <div class="clear-both"></div>
                        <li class="infor-label">手机号</li>
                        <li class="infor-answer">{{data.phoneNum}}</li>
                        <div class="clear-both"></div>
                        <li class="infor-label">我的推荐人</li>
                        <li class="infor-answer">{{data.recommendPhone}}</li>
                        <div class="clear-both"></div>
                        <li class="infor-label">省份证号码</li>
                        <li class="infor-answer">{{data.idNumber}}</li>
                        <div class="clear-both"></div>
                    </script>
                    <ul class="clearfloat infor-content" id="persion">
                       <!-- <li class="infor-label">姓名</li>
                        <li class="infor-answer">Wingyew</li>
                        <div class="clear-both"></div>
                        <li class="infor-label">头像</li>
                        <li class="infor-answer">
                            <img src="img/shafa.jpg" class="img" alt="">
                        </li>
                        <div class="clear-both"></div>
                        <li class="infor-label">会员等级</li>
                        <li class="infor-answer">Wingyew</li>
                        <div class="clear-both"></div>
                        <li class="infor-label">手机号</li>
                        <li class="infor-answer">Wingyew</li>
                        <div class="clear-both"></div>
                        <li class="infor-label">我的推荐人</li>
                        <li class="infor-answer">Wingyew哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
                        <div class="clear-both"></div>
                        <li class="infor-label">省份证号码</li>
                        <li class="infor-answer">Wingyew</li>
                        <div class="clear-both"></div>-->
                    </ul>
                    <h3 class="infor-title">账户明细</h3>
                    <script id="accountScript" type="text/html">
                        {{each data item index}}
                        <ul class="clearfloat infor-content">
                                <li class="infor-label">{{item.accountType | accountType}}</li>
                                <li class="infor-answer">{{item.amountNum}}</li>
                        </ul>
                        {{/each}}
                    </script>
                    <div id="account"></div>
                    <!--<ul class="clearfloat infor-content">
                        <li class="infor-label">电子邮箱</li>
                        <li class="infor-answer">demo1234@163.com</li>
                    </ul>
                    <div class="edit">
                        <input type="button" class="buttons" value="编辑">
                    </div>-->
                </div>
            </div>
            <div class="page" style="display: none">
                <h3 class="big-title">修改密码</h3>
                <form action="" class="page-container">
                    <div class="inputs clearfloat">
                        <label for="" class="">旧密码</label>
                        <input type="password">
                    </div>
                    <div class="inputs clearfloat">
                        <label for="" class="">密码</label>
                        <input type="password">
                    </div>
                    <div class="inputs clearfloat">
                        <label for="" class="">再输入一次密码</label>
                        <input type="password">
                    </div>
                    <div class="edit">
                        <input type="button" class="buttons" value="保存更改">
                        <input type="button" class="cancel-button" value="取消">
                    </div>
                </form>

            </div>
            <div class="page" style="display: none">
                <div class="page-container">
                    <h3>
                        我的收获地址
                    </h3>
                    <table class="shop_table">
                        <thead>
                        <tr>
                            <th class="order-number"><span>姓名</span></th>
                            <th class="order-date"><span>手机号</span></th>
                            <th class="order-total"><span>详细地址</span></th>
                            <th class="order-total"><span>是否是默认地址</span></th>
                            <th class="amount"><span>操作</span></th>
                            <th class="order-actions"></th>
                        </tr>
                        </thead>
                        <script id="addressScript" type="text/html">
                            {{if data.length==0}}
                            <tr>
                                <td colspan="5">暂无地址数据</td>
                            </tr>
                            {{/if}}
                            {{each data item index}}
                            <tr>
                                <td class="order-number"><a href="#">{{item.name}}</a></td>
                                <td class="order-date">{{item.phone}}</td>
                                <td class="order-total">{{item.detailAddress}}</td>
                                <td class="amount">{{item.defaultAddress | defaultAddressFlag}}</td>
                                <td class="order-actions">
                                    <a href="#" class="button">设为默认</a>
                                </td>

                            </tr>
                            {{/each}}
                        </script>
                        <tbody id="address">


                        </tbody>
                    </table>

                </div>
            </div>
            <div class="page">
                <h3 class="big-title">我的推荐</h3>
                    <table class="shop_table">
                        <thead>
                        <tr>
                            <th class="order-number"><span>手机号</span></th>
                            <th class="order-date"><span>推荐时间</span></th>
                            <th class="order-total"><span>团队</span></th>
                            <th class="order-total"><span>金额</span></th>
                        </tr>
                        </thead>

                        <script id="recommendScript" type="text/html">
                            {{if data.length==0}}
                            <tr>
                                <td colspan="5">暂无地址数据</td>
                            </tr>
                            {{/if}}
                            {{each data item index}}
                            <tr>
                                <td class="order-number"><a href="#">{{item.phoneNum}}</a></td>
                                <td class="order-date">{{item.createTime | dateFormat  "YYYY-MM-DD"}}</td>
                                <td class="order-total">{{item.capital}}</td>
                                <td class="amount">{{item.consume}}</td>

                            </tr>
                            {{/each}}

                        </script>
                        <tbody id="recommend">

                        </tbody>
                    </table>

                <div class="page-container" id="">


                </div>
            </div>
            <div class="page">
                <h3 class="big-title">修改手机号码</h3>
                <div class="page-container">
                    <form>
                        <ul class="clearfloat infor-content">
                            <li class="infor-label">手机号码：</li>
                            <li class="infor-answer clearfloat">
                                <div class="infor-answer_left">13002328178 <img src="img/current.png" alt=""></div>
                                <div class="infor-answer_right">
                                    <input type="button" value="修改">
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="w clearfloat">
        <ul class="footer-left">
            <li>
                <h3>关于我们</h3>
                <a href="#">品牌介绍</a>
                <a href="#">加盟方式</a>
                <a href="#">联系我们</a>
            </li>
            <li>
                <h3>关于我们</h3>
                <a href="#">品牌介绍</a>
                <a href="#">加盟方式</a>
                <a href="#">联系我们</a>
            </li>
            <li>
                <h3>关于我们</h3>
                <a href="#">品牌介绍</a>
                <a href="#">加盟方式</a>
                <a href="#">联系我们</a>
            </li>
            <li class="about">
                <h3>关于我们</h3>
                <img class="ercode" src="img/erweima.jpg" alt="">
                <span>
                     <img class="icon" src="img/wechart.png" alt="">
                     官方微信
                 </span>
            </li>
        </ul>
        <img class="footer-right" src="img/logo.png" alt="">
    </div>
    <p>Copyright © 2010-2017 家居商城. All rights reserved.</p>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/moment-2.2.1.js"></script>
<script src="js/template-web.js"></script>
<script src="js/jdgj/config.js"></script>
<script>
    var user = JSON.parse(window.localStorage.getItem("user"));
    var userId = user!=null ?user.id:'26e0bbf545084a248cc56a386577d1e8';
    // 加载订单信息
    var pageNo = pageNo | 1;
    $.get(config.baseUrl + "/order/listOrder.json",{userId: userId, pageNo:1}, function(result){
        if (result.status == 200) {
            var html = template("orderScript", result);
            $("#order").html(html);
        }
    });

    // 个人资料
    template.defaults.imports.userClass = function(value){
        return config.userClass(value);
    };
    $.get(config.baseUrl+"/user/getUserInfo.json",{id:userId}, function(result) {
        if(result.status == 200) {
            var html = template("persionScript",result);
            $("#persion").html(html);
        }
    });

    // 账户明细
    template.defaults.imports.accountType = function(value){
        return config.accountType(value);
    };
    $.get(config.baseUrl+"/account/quaryAccount.json",{userId:userId}, function(result) {
        if(result.status == 200) {
            var html = template("accountScript",result);
            $("#account").html(html);
        }
    });

    // 地址列表
    template.defaults.imports.defaultAddressFlag = function(value){
        return config.defaultAddressFlag(value);
    };
    var addressPageNo = addressPageNo | 1;
    $.get(config.baseUrl+"/address/listAddress.json", {userId: userId, pageNo:addressPageNo }, function(result){
        var html = template("addressScript", result);

        $("#address").html(html);
    });

    // 我的推荐
    template.defaults.imports.dateFormat  = function(value, format){
        return config.formateDate(value, format);
    };
    $.get(config.baseUrl+"/user/reffer.json", {id: userId }, function(result){
        var html = template("recommendScript", result);

        $("#recommend").html(html);
    });
</script>
<script src="js/index.js"></script>
</body>
</html>